<script setup lang="ts">
import { ref } from 'vue';
import ReferenceVue from './Reference.vue'
import dbnorm from '@/db/bignorm'
import dbsterility from '@/db/appendix/sterility'
import dbivd from '@/db/appendix/ivd'
import dbdenture from '@/db/appendix/denture'
import dbsoftware from '@/db/appendix/software'
import dbimplan from '@/db/appendix/implan'

const refShow = ref(false)
const refIdx = ref([0, 0])
const refType = ref('bignorm')
const doShowRef = (type: string, idx: number[]) => {
    refIdx.value = idx
    refType.value = type
    refShow.value = true
}

const props = defineProps({
    data: {
        type: Object, default: {}
    }
})

</script>

<template>
    <div class="bigguide">
        <div class="title">{{ props.data.title }}</div>
        <div class="chapter" v-for="chapter in props.data.chapters">
            <div class="c-title" v-if="chapter.title">{{ chapter.title }}</div>
            <div class="item" v-for="item in chapter.items">
                <div>
                    <span class="star" v-if="item.star">*</span>
                    <span class="i-title" v-if="item.title">{{ item.title }}</span>
                    <span>{{ item.str }}</span>
                </div>
                <div class="guide" v-if="item.guide">
                    {{ item.guide }}
                </div>
                <div class="source">
                    <span v-if="item.norm" @click="doShowRef('bignorm', item.norm!)">
                        规范
                        {{ dbnorm.chapters[item.norm![0]].items[item.norm![1]].title }}
                    </span>
                    <span v-if="item.sterility" @click="doShowRef('sterility', item.sterility!)">
                        附录
                        {{ dbsterility.chapters[item.sterility![0]].items[item.sterility![1]].title.trim() }}
                    </span>
                    <span v-if="item.ivd" @click="doShowRef('ivd', item.ivd!)">
                        附录
                        {{ dbivd.chapters[item.ivd![0]].items[item.ivd![1]].title.trim() }}
                    </span>
                    <span v-if="item.denture" @click="doShowRef('denture', item.denture!)">
                        附录
                        {{ dbdenture.chapters[item.denture![0]].items[item.denture![1]].title.trim() }}
                    </span>
                    <span v-if="item.software" @click="doShowRef('software', item.software!)">
                        附录
                        {{ dbsoftware.chapters[item.software![0]].items[item.software![1]].title.trim() }}
                    </span>
                    <span v-if="item.implan" @click="doShowRef('implan', item.implan!)">
                        附录
                        {{ dbimplan.chapters[item.implan![0]].items[item.implan![1]].title.trim() }}
                    </span>
                </div>
            </div>
        </div>
    </div>
    <ReferenceVue v-model:show="refShow" :type="refType" :idx="refIdx"></ReferenceVue>
</template>

<style lang="less" scoped>
.bigguide {
    padding-bottom: 50vh;
}

.title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px 0;
    white-space: pre-wrap;
}

.c-title {
    position: sticky;
    // border: 1px solid red;
    top: -2px;
    background-color: white;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    padding: 15px 0;
}

.item {
    margin: 10px 0;
    white-space: pre-wrap;
    padding: 0 20px;

    .i-title {
        margin: 0 1em 0 0em;
        // margin: 0 1em 0 2em;
        font-weight: bold;
    }

    .star {
        color: red;
        font-weight: bold;

    }

    .guide {
        font-weight: bold;
    }

    .source {
        // border: 1px solid red;
        text-align: right;
        font-size: 0.9em;
        color: gray;

        span {
            cursor: pointer;
        }
    }
}
</style>